<template>
  <div class="early">
    <iu-header>
      <template #left>
        <img src="@/styles/logo.svg" alt="" style="width:40px" />
      </template>
      <template #title>
        通知
      </template>
      <template #right>
       <div v-focusable  @click="backToHomepage">
          <iconSvg name="home" w="20px" h="22px" class="right_icon"></iconSvg>
        </div>
      </template>
    </iu-header>
    <div class="early-wrapper">
      <mescroll-vue ref="mescroll" :up="mescrollUp" @init="mescrollInit">
        <!--        <selector-->
        <!--          class="selector"-->
        <!--          title="通知类型"-->
        <!--          placeholder="全部通知"-->
        <!--          v-model="type"-->
        <!--          :options="list"-->
        <!--        ></selector>-->
        <div v-for="(item, index) in dataSort" :key="index">
          <iu-card v-if="item.type" class="early-card" :key="index" @click.native="earlywarningDetail(item)">
            <template #title>
              <div
                class="early-card-title"
                :class="{
                  warning: item.alarmLevel === 3,
                  error: item.alarmLevel === 5,
                }"
              >
                <template v-if="item.type === 2">
                  {{ item.title }}
                </template>
                <template v-else>
                  {{ findName(typeList, item.type, 'label', 'value') }}
                </template>
              </div>
            </template>
            <template #tip>
              <div class="early-card-tip" :class="'status' + item.status">
                <span>
                  {{ statusData[+item.status] }}
                </span>
              </div>
            </template>
            <template #body>
              <div class="early-card-body limitLine" v-html="item.content"></div>
              <div class="early-card-department">
                {{ item.type === 2 ? item.departmentName : item.sendUserName }}
              </div>
              <div class="early-card-bottom">
                {{ item.sendTime | formatDate }}
              </div>
            </template>
          </iu-card>

          <iu-card class="early-card" v-else :key="index" @click.native="earlywarningDetail(item)">
            <template #title>
              <div
                class="early-card-title"
                :class="{
                  warning: item.alarmLevel === 3,
                  error: item.alarmLevel === 5,
                }"
              >
                {{ item.alarmLevelName }}
              </div>
            </template>
            <template #tip>
              <div class="early-card-tip" :class="'status' + item.status">
                <span>
                  {{ statusData[+item.status] }}
                </span>
              </div>
            </template>
            <template #body>
              <div class="early-card-body">
                {{ item.content }}
              </div>
              <div class="early-card-department">
                {{ item.departmentName }}
              </div>
              <div class="early-card-bottom">
                {{ item.createTime | formatDate }}
              </div>
            </template>
          </iu-card>
        </div>
      </mescroll-vue>
    </div>
  </div>
</template>
<script>
import { Tab, TabItem, Selector } from 'vux';
import EarlywarningDao from '@/daos/earlywarning_dao';
import iuCard from '@/components/common/card/index';
import iuHeader from '@/components/common/header/index';
import MescrollVue from 'mescroll.js/mescroll.vue';
import SystemMessageDao from '@/daos/system_message_dao';

export default {
  name: 'earlywrning',
  components: {
    Tab,
    TabItem,
    Selector,
    MescrollVue,
    iuCard,
    iuHeader,
  },
  data() {
    return {
      typeList: [
        { value: 1, label: '培训通知' },
        { value: 1, label: '培训通知' },
      ],
      showMore: false,
      tableData: [],
      alarmLevelData: ['', '信息', '', '警告', '', '事故'],
      statusData: ['', '待确认', '', '已确认', '', '误报', '', '', '', '已关闭', '超时未处理'],
      type: '',
      list: [
        { key: 0, value: '全部通知' },
        { key: 1, value: '工单通知' },
        { key: 2, value: '点巡检通知' },
        { key: 3, value: '安全通知' },
        { key: 4, value: '系统通知' },
      ],
      mescroll: null,
      mescrollUp: {
        // auto: false,
        callback: this.getMore,
        page: {
          num: 0,
          size: 10,
        },
        htmlNodata: '<p class="upwarp-nodata">-- 暂无更多的数据 --</p>',
        noMoreSize: 5,
        toTop: {
          src: './static/mescroll-totop.png',
          offset: 1000,
        },
        onScroll: this.onScroll,
      },
      position: 'middle',
      pageSize: 100,
      pageNum: 1,
      total: 0,
      store: {
        id: 0,
        scrollTop: 0,
        departmentName: '',
      },
    };
  },
  created() {},
  //返回首页的公共方法
  inject: ['backToHomepage'],
  activated() {
    // this.pageNum == 1
    // this.getList();
    this.$nextTick((e) => {
      this.mescroll.scrollTo(this.store.scrollTop, 0);
    });
  },
  computed: {
    dataSort() {
      if (this.tableData.length) {
        let arr1 = this.tableData.filter((ele) => ele.status == 1);
        let arr2 = this.tableData.filter((ele) => ele.status != 1);
        arr1.sort((x, y) => {
          if (x.sendTime && y.sendTime) {
            return y.sendTime - x.sendTime;
          }
          if (!x.sendTime && y.sendTime) {
            return y.sendTime - x.createTime;
          }
          if (x.sendTime && !y.sendTime) {
            return y.createTime - x.sendTime;
          }
        });
        arr2.sort((x, y) => {
          if (x.sendTime && y.sendTime) {
            return y.sendTime - x.sendTime;
          }
          if (!x.sendTime && y.sendTime) {
            return y.sendTime - x.createTime;
          }
          if (x.sendTime && !y.sendTime) {
            return y.createTime - x.sendTime;
          }
        });
        this.tableData.splice(0);
        this.tableData.push(...arr1);
        this.tableData.push(...arr2);
      }
      return this.tableData;
    },
    user() {
      //如果在store里拿不到设备信息，就去本地储存拿，并写入store。
      if (!this.$store.state.user) {
        this.$store.commit('saveUser', JSON.parse(localStorage.getItem('user')));
      }
      return this.$store.state.user;
    },
  },
  methods: {
    findName(arr, source, targetValue = 'name', sourceValue = 'code') {
      if (!Array.isArray(arr)) {
        return;
      }
      let res = arr.find((e) => e[sourceValue] === source);
      return res && res[targetValue] ? res[targetValue] : '';
    },
    init() {},
    onScroll(mescroll, y, isUp) {
      this.store.scrollTop = y;
    },
    getMore(page) {
      this.pageNum = page.num;
      // this.pageNum++;
      this.getList();
    },
    mescrollInit(mescroll) {
      this.mescroll = mescroll;
    },
    getList() {
      if (this.pageNum == 1) {
        this.tableData.splice(0);
      }
      let params = {
        orgId: this.user.org.id,
        userId: this.user.id,
        pageSize: this.pageSize,
        pageNum: this.pageNum,
      };
      SystemMessageDao.getMessageList(params, (res) => {
        if (res.content) {
          this.tableData.push(...res.content);
        }
      });
      EarlywarningDao.getEarlywarningList(params, (res) => {
        if (res.content && res.content.length) {
          this.tableData.push(...res.content);
        }
        this.$nextTick(() => {
          this.mescroll.endByPage(res.content.length, res.totalPages);
        });
      });
    },
    earlywarningDetail(item) {
      this.store.id = item.id;
      this.store.departmentName = item.departmentName;
      if (item.type === 2) {
        SystemMessageDao.getDetail(item.id, (res) => {
          item.status = 3
          this.$router.push({
            path: '/produceData/edit',
            query: {
              id: item.typeId,
              see: 1,
              message: 1,
            },
          });
        });
        return;
      }

      if (!item.sendTime) {
        this.$router.push({
          name: 'earlywarningDetails',
          query: {
            id: item.id,
          },
        });
        return;
      }

      this.$router.push({
        name: 'systemMessageDetails',
        query: {
          id: item.id,
        },
      });
    },
  },
};
</script>
<style lang="less" scoped>
.limitLine {
  display: -webkit-box !important;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; //指定行数
}
.early {
  height: 100%;
  background: #1b1c32;
  overflow-y: scroll;
}

.early-wrapper {
  padding: 0 16px 32px;
  height: 100vh;
  overflow: hidden;
  .selector {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
  }
  .early-card {
    margin-bottom: 16px;
    .early-card-title {
      color: #409eff;
      &.warning {
        color: #ffb62c;
      }
      &.error {
        color: #ff2c2c;
      }
    }
    .early-card-tip {
      display: flex;
      justify-content: flex-end;
      margin-right: -8px;
      span {
        padding: 2px 6px 4px;
        text-align: right;
        background-color: #292a4d;
        border-radius: 5px;
      }
      &.status1 {
        color: #f56c6c;
      }
      &.status3 {
        color: #409eff;
      }
      &.status5,
      &.status9 {
        color: gray;
      }
    }
    .early-card-body {
      margin: 8px 0;
    }
    .early-card-department {
      margin: 8px 0;
      color: rgba(255, 255, 255, 0.8);
    }
    .early-card-bottom {
      padding-top: 8px;
      border-top: 1px solid rgba(255, 255, 255, 0.4);
      color: rgba(255, 255, 255, 0.6);
    }
  }
}
</style>
<style lang="less">
.early-wrapper {
  .selector {
    font-size: 16px;
    select {
      color: #fff;
    }
    option {
      color: #000;
    }
  }
}
</style>
